<template>
	<view class="answerpopular-page">
		<u-popup :round="15" :show="show" @close="close" @open="open">
			<view class="popularcontent">
				<view class="popularcontent-top">
					<span>{{title}}</span>
				</view>
				<view class="popularcontent-mide">
					<view class="popularcontent-mide-content">
						<view class="mide-content-input">
							<u--textarea :placeholderStyle="placeholderStyle" v-model="mideinput"
								placeholder="写下你的回答，也可上传图片或时长最多为10分钟的视频、或发送60秒录音" autoHeight :maxlength="3000"
								border="none"></u--textarea>
						</view>
						<view class="mide-content-img" v-if="fileList1.length>0">
							<view class="content-img-list" v-for="(item,index) in fileList1">
								<uni-icons type="clear" size="20"
									style="position: absolute;top: -5rpx; right: -5rpx; z-index: 999;"
									@click="deletimg(index)"></uni-icons>
								<img :src="item" alt="" style="width: 120rpx; height: 120rpx;margin-right: 20rpx;">
							</view>
						</view>
						<view class="mide-content-video" v-if="fileList2.length>0">
							<view class="content-video-list" v-for="(item,index) in fileList2">
								<uni-icons type="clear" size="30"
									style="position: absolute;top: -5rpx; right: -5rpx; z-index: 999;"
									@click="deletvideo(index)"></uni-icons>
								<video :src="item" controls
									style="width: 350rpx; height: 280rpx;margin-right: 20rpx;"></video>
							</view>

						</view>
						<!-- 录音 -->
						<!-- 录音 -->
						<view class="mide-content-audio" v-if="resaudioList.length>0">
							<view class="content-audio-body">
								<view class="flex-audio" v-for="(item, index) in resaudioList" :key="index">
									<view class="content-audio" @click="changepaly(item,index)">
										<view class="content-audio-left">
											<view class="audio-left-hu">
												<view class="left-hu-one"
													:class="item.swichaudio?'animations-audio':''">
													<view class="left-hu-two">
														<view class="left-hu-three"
															:class="item.swichaudio?'animations-audio-two':''">
															<view class="left-hu-fore">
																<view class="left-hu-five"
																	:class="item.swichaudio?'animations-audio-three':''">
																</view>
															</view>
														</view>
													</view>
												</view>
											</view>
											<span>{{item.audiotitle}}</span>
										</view>
										<span class="content-audio-misc">{{item.audiounm}}s</span>
									</view>
									<view>
										<uni-icons type="clear" size="20" style=""
											@click.stop="deletAudio(index)"></uni-icons>
									</view>
								</view>
							</view>
						</view>


					</view>
				</view>
				<view class="popularcontent-bottom">
					<view class="popularcontent-bottom-top">
						<span>最多可上传1个时长最多为10分钟的视频和5条语音和5张图片</span>
						<view class="popularcontent-bottom-load">
							<!-- <u-upload @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="5"></u-upload> -->
							<!-- 	<uni-file-picker fileMediatype="image" @select="select" @progress="progress"
								@success="success" @fail="fail" limit="5" /> -->
							<view class="onloadpohoe" @click="onloadpohot">
								<u-icon size="50rpx" color="#DCE4EA" name="plus"></u-icon>
							</view>

							<!-- #ifdef MP-WEIXIN -->
							<view class="onloadvideo" @click="onloadvodeo">
								<img :src="queryIconImage(`anserpopular1`)" alt="" class="onloadvideo-img">
							</view>
							<!-- #endif -->

							<!-- #ifdef H5 -->
							<view class="onloadvideo" @click="onloadvodeotwo">
								<img :src="queryIconImage(`anserpopular1`)" alt="" class="onloadvideo-img">
							</view>
							<!-- #endif -->

							<view class="aydio">
								<!-- #ifdef MP-WEIXIN -->
								<record @returnAudio="returnAudio" :audioList="audioList"></record>
								<!-- #endif -->
							</view>
							<!-- <u-upload @afterRead="afterReadtwo" @delete="deletePictwo" name="2" multiple :maxCount="1"
								accept="video"></u-upload> -->
						</view>
					</view>
					<view class="popularcontent-bottom-btn">
						<view class="bottom-btn" @click="checkUserComment">
							<span>发送回答</span>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "answerPopular",
		props: {
			showbtn: {
				type: Boolean,
				// default: ''
			},
			title: {
				type: String,
			},
			id: {
				type: Number,
			},
			userId: {
				type: Number,
			},
			plugin: {
				type: Object,
			},
			articleTpye: {
				type: String,
			},
			answer_type: {
				type: String,
			},
			invitedAnswerPopularBlean: {
				type: Boolean,
				default: true
			},
			firstAnswerInfo: {
				type: Object,
			}
		},
		data() {
			return {
				videoid: [],
				comment_flag: {},
				imgid: [],
				audioList: [{
					name: "1111"
				}],
				Audio: true,
				fileList: '',
				fileList1: [],
				fileList1path: [],
				fileList2: [],
				fileList2path: [],
				audiourl: {},
				audioid: '',
				swichaudio: false,
				audiotitle: '点击播放',
				audiounm: 0,
				unm: 0,
				show: false,
				mideinput: '',
				resaudioList: [], //录音列表
				audioidList: [],
				placeholderStyle: 'font-size: 30rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #999999;line-height: 42rpx;',
				isPublic: false,
				isPay: false
			};
		},
		options: {
			styleIsolation: 'shared'
		},
		computed: {
			...mapState({
				iconList: state => state.remote?.iconList?.data_list ?? [],
				user: state => state.user?.data ?? {},
			})
		},
		methods: {
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			// 获取上传状态
			// select(e) {
			// 	console.log('选择文件：', e.tempFilePaths[0])
			// 	this.fileList1.push(e.tempFilePaths[0])
			// },
			deletAudio(index) {
				this.resaudioList.splice(index, 1);
				this.audioidList.splice(index, 1);
			},
			async returnAudio(val) {
				if (this.audioidList.length > 4) {
					uni.showToast({
						icon: 'none',
						title: '最多5条录音'
					})
				} else {
					this.resaudioList.push({
						audiourl: val.data,
						audiounm: val.datatwo,
						audiotitle: '点击播放',
						swichaudio: false,
						unm: val.datatwo
					})
					let audioid = await this.up_video_id({
						path: val.data
					})
					this.audioidList.push({
						audioid: audioid,
						content: '录音',
						time: val.datatwo
					})
					console.log("返回的录音", this.audioidList);
				}
			},
			changepaly(item, index) {
				let audio = uni.createInnerAudioContext()
				consloe.log("录音文件==============", audio)
				this.resaudioList[index].swichaudio = !this.resaudioList[index].swichaudio
				let time = null
				if (this.resaudioList[index].swichaudio) {
					audio.src = this.resaudioList[index].audiourl
					audio.play()
					this.resaudioList[index].audiotitle = "正在播放..."

					time = setInterval(() => {
						this.resaudioList[index].audiounm = this.resaudioList[index].audiounm - 1
						if (this.resaudioList[index].audiounm < 0) {
							audio.stop()
							clearInterval(time)
							this.resaudioList[index].audiotitle = '点击播放'
							this.resaudioList[index].swichaudio = false
							this.resaudioList[index].audiounm = this.resaudioList[index].unm
						}
						if (!this.resaudioList[index].swichaudio) {
							audio.stop()
							clearInterval(time)
							this.resaudioList[index].audiounm = this.resaudioList[index].unm
						}
					}, 1000)
				} else {
					audio.stop()
					this.resaudioList[index].audiotitle = '点击播放'
					this.resaudioList[index].audiounm = this.resaudioList[index].unm
				}
			},
			async checkUserComment() {
				if (this.mideinput) {
					this.plugin.api.nlp('sensitive', {
						q: this.mideinput,
						mode: 'bert'
					}).then(res => {
						for (let i in res.result) {
							if (res.result[i][0] == 'other') {
								if (res.result[i][1] >= 0.8 && res.result[i][1] <= 1) {
									this.gitsubmit()
								} else {
									uni.showToast({
										title: '提交失败，请修改内容后重新提交',
										icon: 'none',
										duration: 1000
									})
								}
							}
						}
					})
				} else {

					uni.showToast({
						icon: 'none',
						title: '内容不能为空'
					})
				}
			},
			gitsubmit() {
				// console.log('接收的文章id', this.id, '接收的用户id', this.userId, this.user.id);


				if (this.mideinput) {
					//提交评论
					//图片
					let newImgList = []
					if (this.imgid.length) {
						this.imgid.map(item => {
							newImgList.push({
								img_id: item,
							})
						})
					}
					//视频
					let newVideoList = []
					if (this.videoid.length) {
						this.videoid.map(item => {
							newVideoList.push({
								video_id: item,
							})
						})
					}
					//录音
					let newAudioList = []
					if (this.audioidList.length) {
						this.audioidList.map(item => {
							newAudioList.push({
								content: item.content,
								video_id: item.audioid,
								time: item.time
							})
						})
					}
					let arr = [...newImgList, ...newVideoList, ...newAudioList]

					let that = this
					if (this.articleTpye == "普通提问") {
						this.isPublic = true
						this.addCommentPost(arr)
					} else if (this.answer_type == "公开参与") { //提问为公开状态

						//TODO 此处缺少如果是受邀答主的回答，默认为不公开！
						console.log("invitedAnswerPopularBlean", this.invitedAnswerPopularBlean);
						if (this.invitedAnswerPopularBlean) {
							if (this.firstAnswerInfo && this.firstAnswerInfo.id) {
								console.log("有回答过一次");
								that.isPay = this.firstAnswerInfo.ud_ispay_ff5175
								that.isPublic = this.firstAnswerInfo.public
								that.addCommentPost(arr)

							} else {
								that.isPay = true
								uni.showModal({
									title: '是否公开查看该回答?',
									content: '是否需要公开您的回答，如果公开他人需要付费查看，金额为悬赏金额10%，不公开只有提问者才能看到',
									cancelText: "是",
									confirmText: "否",
									confirmColor: "#000000",
									success: function(res) {
										if (res.confirm) {
											that.isPublic = false
											that.addCommentPost(arr)
										} else {
											that.isPublic = true
											that.addCommentPost(arr)
										}
									}
								})
							}
						} else {
							if (this.firstAnswerInfo && this.firstAnswerInfo.id) {
								console.log("有回答过一次");
								that.isPay = this.firstAnswerInfo.ud_ispay_ff5175
								that.isPublic = this.firstAnswerInfo.public
								that.addCommentPost(arr)

							} else {
								that.isPublic = true
								uni.showModal({
									title: '是否允许他人付费查看该回答?',
									content: '是否需要其他人付费来查看您的回答，他人付费查看金额为悬赏金额10%',
									cancelText: "是",
									confirmText: "否",
									confirmColor: "#000000",
									success: function(res) {
										if (res.confirm) {
											that.isPay = false
											that.addCommentPost(arr)
										} else {
											that.isPay = true
											that.addCommentPost(arr)
										}
									}
								})
							}
						}
					} else { //提问为不公开状态状态
						that.isPay = true
						that.isPublic = false
						that.addCommentPost(arr)
					}

				} else {
					uni.showToast({
						icon: 'none',
						title: '内容不能为空'
					})
				}
			},
			//查询，判断是加减热度
			queryArticleHeatAndUpdate(type) {
				this.$store.dispatch('remote/query', {
					model: 'article',
					where: {
						id: {
							_eq: this.id
						}
					},
					field_string: `id user_user heat`
				}).then(res => {

					if (type == true) {
						this.$store.dispatch("remote/mutation", {
							operation: 'update_article',
							where: {
								id: {
									_eq: res.data.id
								}
							},
							_set: {
								heat: res.data.heat + 1
							}
						})
					} else {
						this.$store.dispatch("remote/mutation", {
							operation: 'update_article',
							where: {
								id: {
									_eq: res.data.id
								}
							},
							_set: {
								heat: res.data.heat - 1
							}
						})
					}
				})
			},

			addCommentPost(arr) {
				console.log("addCommentPost", this.isPublic, this.isPay);
				this.$store.dispatch('app/runActionflowmain', {
					args: {
						actionflow_name: "文章_添加评论",
						payload: {
							operate: 1, //1:进行留言 
							articleId: this.id, //文章id
							content: this.mideinput, //内容
							public: this.isPublic,
							isPay: this.isPay,
							arr: arr
						},
					},
				}).then(res => {
					console.log(this.id, this.userId, this.user.id);
					if (res.status == '成功') {
						this.queryArticleHeatAndUpdate(true)
						this.$store.dispatch('app/runActionflowmain', {
							args: {
								actionflow_name: "文章_指定答主查询",
								payload: {
									articleId: this.id,
									articleUserId: this.userId,
									user_user: this.user.id
								}
							}
						}).then(res => {
							console.log('指定答主查询结果为', res)
						})
						this.show = false
						this.$emit("switchpopular")
					}
				})
			},


			deletimg(index) {
				this.imgid.splice(index, 1)
				this.fileList1.splice(index, 1)
				this.fileList1path.splice(index, 1)
			},
			deletvideo(index) {
				this.videoid.splice(index, 1)
				this.fileList2.splice(index, 1)
				// this.fileList2path.splice(index, 1)
			},
			async onloadpohot() {
				if (this.fileList1.length > 4) {
					uni.showToast({
						icon: 'none',
						title: '最多上传5张图片'
					})
				} else {
					uni.chooseImage({
						count: 5,
						success: async (err) => {
							this.fileList1.push(...err.tempFilePaths)
							this.fileList1path.push(...err.tempFiles)
							if (this.fileList1.length > 4) {
								uni.showToast({
									icon: 'none',
									title: '最多上传5张图片'
								})
								this.fileList1 = this.fileList1.splice(0, 5)
								this.fileList1path = this.fileList1path.splice(0, 5)
							} else {}
							this.imgid = []
							for (let i = 0; i < this.fileList1path.length; i++) {
								let add = await this.up_image_id(this.fileList1path[i])
								this.imgid.push(add)
							}
							console.log('imgid', this.imgid);
						}
					})
					// let arr = {}
				}
			},
			async onloadvodeotwo() {

			},
			async onloadvodeo() {
				if (this.fileList2.length > 0) {
					uni.showToast({
						icon: 'none',
						title: '最多上传1个视频'
					})
				} else {
					uni.chooseVideo({
						success: async (err) => {
							console.log("视频", err);
							if (err.duration > 600) {
								uni.showToast({
									icon: "none",
									title: "您上传的视频时长超过10分钟，请重新选择！",
									duration: 2500
								})
								return
							}

							this.fileList2.push(err.tempFilePath)
							let arr = {}
							arr.path = err.tempFilePath
							let add = await this.up_video_id(arr)
							this.videoid.push(add)
							console.log(this.videoid);
						}
					})
				}

			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			open() {
				// this.show = true
			},
			close() {
				this.fileList1 = []
				this.fileList2 = []
				this.audiourl = {}
				this.imgid = []
				this.audioid = ''
				this.videoid = []
				this.mideinput = ''

				this.show = false
			},
			// // 删除图片
			// deletePic(event) {
			// 	this[`fileList${event.name}`].splice(event.index, 1)
			// },
			async up_file_id(data) {
				let file_id = await this.$store.dispatch("app/upload", {
					method: "ufile",
					file: data
				}).then(res => {
					console.log("res.fileId....................", res.fileId)
					return res.fileId
				})
				return file_id
			},
			async up_image_id(data) {
				let image_id = await this.$store.dispatch("app/upload", {
					method: "uimage",
					file: data
				}).then(res => {
					console.log("res.imageId....................", res.imageId)
					return res.imageId
				})
				return image_id
			},
			async up_video_id(data) {
				console.log('dataaaaaaaaaaaa', data)
				let video_id = await this.$store.dispatch("app/upload", {
					method: "uvideo",
					isloading: false,
					file: data
				}).then(res => {
					return res.videoId
				})
				return video_id
			},
		},
		watch: {
			showbtn(val) {
				console.log("监听改变打印", val);
				this.resaudioList = []
				this.fileList1 = []
				this.fileList2 = []
				this.audiourl = {}
				this.imgid = []
				this.audioid = ''
				this.videoid = []
				this.mideinput = ''
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.answerpopular-page {
		width: 100%;
		height: 100%;

		.popularcontent {
			width: 100%;
			height: 80vh;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.popularcontent-top {
				width: 100%;
				box-sizing: border-box;
				font-size: 36rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #5F5F5F;
				border-bottom: 2rpx solid #ccc;
				padding: 40rpx 28rpx;
			}

			.popularcontent-mide {
				flex: 1;
				box-sizing: border-box;
				overflow: hidden;
				overflow-y: auto;
				padding: 13rpx 75rpx 0 28rpx;

				.popularcontent-mide-content {
					width: 100%;
					height: 100%;
					overflow: hidden;
					overflow-y: auto;
					display: flex;
					flex-direction: column;

					.mide-content-input {
						width: 100%;
						height: auto;

						::v-deep .u-textarea {
							max-height: 90% !important;

							.u-textarea__field {
								max-height: 100% !important;
								min-height: 100rpx !important;
							}
						}
					}

					.mide-content-img {
						width: 100%;
						display: flex;
						height: 120rpx;
						margin: 20rpx;
						overflow-x: auto;

						.content-img-list {
							width: 120rpx;
							height: 120rpx;
							margin-right: 20rpx;
							position: relative;
						}
					}

					.mide-content-video {
						width: 100%;
						display: flex;
						height: 280rpx;

						.content-video-list {
							width: 350rpx;
							height: 280rpx;
							position: relative;
							margin-right: 20rpx;
						}

					}

					.mide-content-audio {
						width: 100%;
						text-align: left;
						height: 100rpx;
						margin: 20rpx 0;

						// position: relative;
						.content-audio-body {
							width: 100%;
							text-align: left;
							position: relative;

							.content-audio {
								display: flex;
								justify-content: space-between;
								align-items: center;
								width: 390rpx;
								height: 80rpx;
								// background: linear-gradient(151deg, #f6b850 0%, #F09500 100%);
								// box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(95, 163, 255, 0.3);
								// border-radius: 40rpx 40rpx 40rpx 40rpx;
								font-size: 30rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 36rpx;
								background-image: url('../../static/popularaudio.png');
								background-repeat: no-repeat;
								background-size: 100%;

								@keyframes load {
									0% {
										background-color: #fff;
									}

									50% {
										background-color: #ccc;
									}

									100% {
										background-color: #fff;
									}
								}

								.content-audio-left {
									margin-left: 57rpx;
									display: flex;
									align-items: center;

									.audio-left-hu {
										border-radius: 30rpx 0 0;
										width: 30rpx;
										height: 30rpx;
										// background-color: red;
										transform: rotate(135deg);
										position: relative;
										overflow: hidden;
										margin-right: 15rpx;

										.animations-audio {
											background-color: #ccc;
											animation: load 2.5s 1s infinite linear;
										}

										.left-hu-one {
											width: 60rpx;
											height: 60rpx;
											background-color: #fff;
											border-radius: 50%;
											display: flex;
											justify-content: center;
											align-items: center;

											.left-hu-two {
												width: 50rpx;
												height: 50rpx;
												background-color: #f5b447;
												border-radius: 50%;
												display: flex;
												justify-content: center;
												align-items: center;

												.animations-audio-two {
													background-color: #ccc;
													animation: load 2.3s 1s infinite linear;
												}

												.left-hu-three {
													width: 40rpx;
													height: 40rpx;
													background-color: #fff;
													border-radius: 50%;
													display: flex;
													justify-content: center;
													align-items: center;

													.left-hu-fore {
														width: 30rpx;
														height: 30rpx;
														background-color: #f5b447;
														border-radius: 50%;
														display: flex;
														justify-content: center;
														align-items: center;

														.animations-audio-three {
															background-color: #ccc;
															animation: load 2s 1s infinite linear;
														}

														.left-hu-five {
															width: 20rpx;
															height: 20rpx;
															background-color: #fff;
															border-radius: 50%;
															display: flex;
															justify-content: center;
															align-items: center;
														}
													}
												}
											}
										}

									}
								}

								.content-audio-misc {
									font-size: 24rpx;
									font-family: Source Han Sans CN-ExtraLight, Source Han Sans CN;
									font-weight: 250;
									color: #FFFFFF;
									line-height: 36rpx;
									margin-right: 48rpx;
								}
							}
						}


					}

				}
			}

			.popularcontent-bottom {
				width: 100%;

				.popularcontent-bottom-top {
					width: 100%;
					border-bottom: 2rpx solid #ccc;
					box-sizing: border-box;
					padding-left: 28rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 42rpx;
					padding-bottom: 24rpx;

					.popularcontent-bottom-load {
						width: 100%;
						margin-top: 8rpx;
						height: 120rpx;
						align-items: flex-end;
						display: flex;

						.onloadpohoe {
							width: 120rpx;
							height: 120rpx;
							border: 2rpx solid #ccc;
							background-color: #F5F8FC;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 25rpx;
						}

						.onloadvideo {
							width: 120rpx;
							height: 120rpx;
							border: 2rpx solid #ccc;
							background-color: #F5F8FC;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 25rpx;

							.onloadvideo-img {
								width: 44rpx;
								height: 31rpx;
							}
						}


					}
				}

				.popularcontent-bottom-btn {
					width: 100%;
					height: 126rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.bottom-btn {
						width: 240rpx;
						height: 80rpx;
						background: #F09500;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						margin-right: 12rpx;
						text-align: center;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Bold, Source Han Sans CN;
						font-weight: 700;
						color: #FFFFFF;
						line-height: 80rpx;
					}
				}
			}
		}
	}
</style>